<script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';
import { post } from '@/service/api/api';

const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  lotNo: null,
  noticeState: null,
  time: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'lotNo',
    label: '批卡号',
    placeholder: '请输入批卡号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: '批卡号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'fullProdNo',
    dataIndex: 'fullProdNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createUser',
    dataIndex: 'createUser',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      keywords: null,
      noticeState: null,
      time: null
    };
    search();
  });
}

const { handleClose, handleLoading, handleShow, handleReset } = window.$useModal({
  modalOption: {
    title: '新增白名单',
    width: 800,
    confirmBtnText: '保存',
    destroyOnClose: true
  },
  formData: { lotNo: null },
  formList: [
    {
      type: 'input',
      key: 'lotNo',
      label: '批卡号',
      placeholder: '请输入批卡号',
      span: 24,
      rule: {
        required: true,
        message: '请输入批卡号',
        trigger: 'change'
      }
    }
  ],
  onOk: data => {
    handleLoading(true);
    post('/mes/mesToErpWhite/add/new', data)
      .then(({ error }) => {
        if (!error) {
          window.$message.success('新增成功');
          handleClose();
          handleReset();
          tableRef.value.getData(1);
        }
      })
      .finally(() => {
        handleLoading(false);
      });
  }
});

function handleAdd() {
  handleShow();
}
</script>

<template>
  <div
    class="code-whitelist-page jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto"
  >
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      :auto-generate-uuid="true"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/mes/mesToErpWhite/list"
    >
      <template #title>
        <AButton type="primary" size="small" ghost class="mini-btn mr-8px" @click="handleAdd">
          <template #icon>
            <icon-ic-round-add class="align-sub text-icon" />
          </template>
          <span class="ml-3px">新增</span>
        </AButton>
      </template>
    </Table>
  </div>
</template>

<style lang="scss" scoped></style>
